<template>
  <div>

    <!--<div class="aside-menu-frontpage-left" v-bind:style="asideMenuLeft">
      <div class="menu-frontpage-left-content">
        <ul class="menu-ul">
          <li :class="linkId=='#transportBusiness'?'active':''" @click="checkAsideMenu('transportBusiness')"><a href="javascript:void(0)">联运商情</a></li>
          <li :class="linkId=='#transportQuery'?'active':''" @click="checkAsideMenu('transportQuery')"><a href="javascript:void(0)">运价查询</a></li>
          <li :class="linkId=='#trackingCode'?'active':''" @click="checkAsideMenu('trackingCode')"><a href="javascript:void(0)">睿号查询</a></li>
        </ul>
        <div class="backTop" @click="checkAsideMenu('frontPage')">
          <a href="javascript:void(0)">
            <div><Icon type="ios-arrow-up"></Icon></div>
            <div>返回顶部</div>
          </a>
        </div>
      </div>
    </div>-->

    <transition name="fade">
      <div class="aside-menu-frontpage-right" v-if="showAsideMenu">
        <div class="menu-frontpage-right-content">
          <ul class="menu-ul">
            <li>
              <a href="javascript:void(0)" @click="layimShowAction">
                <div>
                  <i class="icon kf">
                    <img :src="backImg" alt="">
                  </i>
                </div>
                <div>在线客服</div>
              </a>
            </li>
            <li>
              <Poptip trigger="hover" title="咨询热线" content="18963800909" placement="right">
                <div>
                  <Icon type="android-call" size="20"></Icon>
                </div>
                <div>咨询热线</div>
              </Poptip>
            </li>
            <li @click="shwoSuggestForm">
              <div>
                <Icon type="edit" size="18"></Icon>
              </div>
              <div>意见反馈</div>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <layim v-if="layIMShow" :config="layimConfig"></layim>
    <Modal v-model="suggestFormShow" width="760px"
           title="意见反馈"
           @on-ok="ok('suggestForm')"
           @on-cancel="cancel">
      <Form :model="suggestForm" ref="suggestForm" :rules="suggestFormRules" label-position="top"
            @submit.native.prevent>
        <FormItem label="选择反馈类型" prop="type">
          <RadioGroup v-model="suggestForm.type">
            <Radio label="1">
              <span>网站建议</span>
            </Radio>
            <Radio label="2">
              <span>平台建议</span>
            </Radio>
            <Radio label="3">
              <span>其他</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="" prop="content">
          <Input v-model="suggestForm.content" type="textarea" :autosize="{minRows: 2, maxRows: 5}"></Input>
        </FormItem>
        <FormItem label="联系方式" prop="contactWay">
          <Input placeholder="请输入您的联系方式" v-model="suggestForm.contactWay"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import imgMessage from '@static/img/icon_message.png'
  import {getTempUser, getCustomerServiceList, sendSuggestion} from '@api/frontEnd'
  import imgAboutus from '../../../../../static/img/img_aboutus01.png'
  import {mapGetters} from 'vuex'

  export default {
    name: 'asideMenu',
    data () {
      let linkId = '#transportBusiness'
      let showAsideMenu = false
      let backImg = imgMessage
      let layIMShow = false
      let layimConfig = {}
      let layoutHeight = 600
      let isCollapsed = false
      let breadcrumbArray = []
      let tempUsers = {}
      let customerServiceList = []
      let CarouselValue = 0
      let setting = {
        autoplay: false,
        autoplaySpeed: 5000,
        dots: 'none',
        radiusDot: false,
        trigger: 'hover',
        arrow: 'never'
      }
      let suggestForm = {
        type: '1',
        content: '',
        contactWay: ''
      }
      let suggestFormRules = {
        content: [
          {required: true, message: '内容不能为空！', trigger: 'blur', whitespace: true, type: 'string'}
        ],
        contactWay: [
          {required: true, message: '联系方式不能为空！', trigger: 'blur'},
          {pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '号码格式不正确！', trigger: 'blur'}
        ]
      }
      let suggestFormShow = false
      let datas = {
        linkId,
        showAsideMenu,
        backImg,
        layIMShow,
        layimConfig,
        layoutHeight,
        isCollapsed,
        breadcrumbArray,
        tempUsers,
        customerServiceList,
        CarouselValue,
        setting,
        imgAboutus,
        suggestForm,
        suggestFormRules,
        suggestFormShow
      }
      return datas
    },
    methods: {
      shwoSuggestForm () {
        if (!this.suggestFormShow) {
          this.suggestFormShow = true
        }
      },
      cancel () {
        this.suggestFormShow = false
        this.suggestForm.type = '1'
        this.suggestForm.content = ''
        this.suggestForm.contactWay = ''
      },
      ok (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            sendSuggestion(this.suggestForm).then(res => {
              if (res.data.isSuccess === 1) {
                this.$Notice.success({
                  title: '感谢您的建议',
                  desc: '我们会尽快与您取得联系！请持续关注联运e达哦^_^',
                  duration: 2
                })
                this.suggestForm.type = '1'
                this.suggestForm.content = ''
                this.suggestForm.contactWay = ''
              }
            })
          }
        })
      },
      layimShowAction () {
        if (this.layIMShow) {
          return
        }
        getTempUser().then(res => {
          if (res.data.isSuccess === 1) {
            this.tempUsers = res.data.data
            return getCustomerServiceList()
          }
        }).then(res => {
          if (res.data.isSuccess === 1) {
            this.customerServiceList = res.data.data
          }
        }).then(() => {
          if (this.currentUser.userId) {
            this.tempUsers.loginName = this.currentUser.loginName
            this.tempUsers.id = this.currentUser.userId
            this.tempUsers.headIco = this.currentUser.headIco
          }
          if (!this.tempUsers || this.customerServiceList.length <= 0) {
            this.$Notice.warning({
              title: '提示',
              desc: '客服正忙,请稍后重试！'
            })
            return false
          }
          let resFriends = []
          resFriends.push({
            username: this.customerServiceList[0].loginName,
            id: this.customerServiceList[0].id,
            avatar: this.customerServiceList[0].headIco,
            // sign: +friend.type === 1 ? friend.content : (+friend.type === 2 ? '语音' : '图片'),
            status: 'online'
          })
          this.layimConfig = {
            title: '临时聊天',
            min: false,
            init: {
              mine: {
                username: this.tempUsers.loginName, // 我的昵称
                id: this.tempUsers.id, // 我的ID
                status: 'online', // 在线状态 online：在线、hide：隐身
                sign: '在深邃的编码世界，做一枚轻盈的纸飞机', // 我的签名
                avatar: this.tempUsers.headIco // 我的头像
              },
              friend: [{
                groupname: '联系人', // 好友分组名
                id: 1, // 分组ID
                list: resFriends
              }],
              group: []
            }
          }
          this.layIMShow = true
        })
      }
    },
    mounted () {
      let _this = this
      window.addEventListener('scroll', function () {
        let scroolTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
        if (scroolTop >= 400 && scroolTop <= 2000) {
          _this.showAsideMenu = true
        } else {
          _this.showAsideMenu = false
        }
      })
    },
    watch: {
      'currentUser.userId' (newVal, oldVal) {
        if (!newVal) {
          this.layIMShow = false
        }
      }
    },
    components: {layim: () => import('./layIM/index.vue')},
    computed: {
      ...mapGetters(['currentUser', 'activeMenu'])
    }
  }
</script>
<style scoped>
  /* 侧边栏样式 */
  .aside-menu-frontpage-left {
    position: fixed;
    top: 600px;
    left: 100px;
    z-index: 2000;
  }

  .menu-frontpage-left-content {
    width: 76px;
    height: 157px;
    background-color: transparent;
  }

  .menu-frontpage-left-content .menu-ul {
    height: 108px;
    width: 76px;
    overflow: hidden;
    box-shadow: 0 2px 10px 0 rgba(255, 219, 89, 0.88);
  }

  .menu-frontpage-left-content .menu-ul li {
    width: 76px;
    height: 36px;
    text-align: center;
    line-height: 36px;
  }

  .menu-frontpage-left-content .menu-ul li a {
    display: block;
    width: 76px;
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 12px;
    color: #1B1E21;
    background-color: #FECA2E;
  }

  .menu-frontpage-left-content .menu-ul li a:hover {
    color: #FECA2E;
    background: #1B1E21;
  }

  .menu-frontpage-left-content .menu-ul li:first-child a {
    border-radius: 2px 2px 0 0;
  }

  .menu-frontpage-left-content .menu-ul li:last-child a {
    border-radius: 2px 2px 0 0;
  }

  .menu-frontpage-left-content .menu-ul .active a {
    color: #FECA2E;
    background: #1B1E21;
  }

  .menu-frontpage-left-content .backTop {
    width: 76px;
    height: 46px;
    margin-top: 3px;
    background: #EEEEEE;
    border-radius: 2px;
    padding: 5px;
  }

  .menu-frontpage-left-content .backTop a {
    display: block;
  }

  .menu-frontpage-left-content .backTop a div {
    height: 18px;
    width: 100%;
    line-height: 18px;
    text-align: center;
    font-size: 12px;
    color: #1B1E21;
  }

  .aside-menu-frontpage-right {
    position: fixed;
    top: 480px;
    right: 0;
    z-index: 2000;
  }

  .menu-frontpage-right-content {
    width: 76px;
    height: 183px;
    background-color: transparent;
  }

  .menu-frontpage-right-content .menu-ul {
    width: 76px;
    height: 185px;
    overflow: hidden;
  }

  .menu-frontpage-right-content .menu-ul li {
    width: 76px;
    height: 60px;
    text-align: center;
    background: #FECA2E;
    box-shadow: 0 2px 10px 0 rgba(255, 219, 89, 0.88);
    border-radius: 2px;
    margin-top: 1px;
    padding: 10px;
  }

  .menu-frontpage-right-content .menu-ul li a {
    display: block;
  }

  .menu-frontpage-right-content .menu-ul li a div {
    height: 20px;
    width: 100%;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
    color: #1B1E21;
  }

  .menu-frontpage-right-content .menu-ul li a div .icon {
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    background-size: cover;
  }

  .fade-enter-active, .fade-leave-active {
    transition: right 1s;
  }

  .fade-enter /* .fade-leave-active below version 2.1.8 */
  {
    right: 0;
  }

  .fade-leave-to {
    right: -80px;
  }
</style>
